<!--财务统计-->
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all">
<link rel="stylesheet" href="__STATIC__/css/pcorder.css">
<script src="__STATIC__/layui/layui.js"></script>
<script src="__STATIC__/libs/g2-chart/chart.min.js"></script>
<script src="__STATIC__/libs/g2-chart/data-set.min.js"></script>
<div class="MainCont">
	<div class="head"><div class="tag fa fa-list-ul">财务及积分报表</div></div>
    <div class="cont layui-tab"> 
				<ul class="layui-tab-title">
                    <li class="layui-this" id="map2title">综合统计</li>
					<li onclick="choose_yz('rmb','o','mountNode2')">消费及提现统计</li>
                    <li onclick="choose_yz('rmb','i','mountNode3')">充值及收入统计</li>
                    <li onclick="choose_yz('jifen','i','mountNode4')">积分赚取统计</li>
                    <li onclick="choose_yz('jifen','o','mountNode5')">积分消费统计</li><!--
                     <span class="layui-badge-rim" onclick="tabChart('default')">白色主题</span>
                    <span class="layui-badge layui-bg-black" onclick="tabChart('dark')">黑色主题</span> -->
                </ul>                    
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div id="mountNode"></div>
                    </div>
                    <div class="layui-tab-item"><div id="mountNode2"></div></div>
                    <div class="layui-tab-item"><div id="mountNode3"></div></div>
                    <div class="layui-tab-item"><div id="mountNode4"></div></div>
                    <div class="layui-tab-item"><div id="mountNode5"></div></div>
                </div>
<script type="text/javascript">
layui.use('element', function(){
  var element = layui.element;
});

var load_yuzu = [];
function choose_yz(etype,type,obj_id){
	if(load_yuzu[obj_id]==true){
		return ;
	}
	var url;
	if(etype=='rmb'){
		url = "{:url('wxapp.rmb/index')}?";
	}else{
		url = "{:url('wxapp.jifen/index')}?money_type=0&";	//money_type=0是系统积分,可以换其它数字积分类型
	}
	layer.msg('数据加载中,请稍候...');
	//month 参数可以换成按天 day 统计或按 week 周 而 nums 是周期参数可以自由设置更多的数值
	$.get(url+"in_out="+type+"&type=month&nums=1,2,3,4,5,6,7,8,9,10,11,12",function(res){
		if(res.code==0){
			var listdb = new Array();
			$.each(res.data,function(i,v){
				var name;
				if(i==0){
					name = '本月';
				}else if(i==1){
					name = '上月';
				}else{
					name = i+'月前';
				}
				listdb.push({ genre: name, sold: Math.abs(v)  });			
			});
			yuanzu(listdb,obj_id);
			layer.closeAll();
			load_yuzu[obj_id] = true;
			//console.log(listdb);
		}else{
			layer.msg('获取数据失败!');
		}
	});
}

//单柱状
function yuanzu(data,obj_id){
	//var data = [{ genre: '本周', sold: 10 },{ genre: '上周', sold: 40 },{ genre: '上2周', sold: 4 },{ genre: '上3周', sold: 0 }]; 
	//document.getElementById('map1title')='最近积分赚取记录';
	//下面这个是扩展钩子，可以对 data 重新赋值	
		// G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
    // Step 1: 创建 Chart 对象
    const chart = new G2.Chart({
        container: obj_id, // 指定图表容器 ID
        // width : 600, // 指定图表宽度
        forceFit: true,
        padding: [ 30, 30, 80, 50],
        height : 305 // 指定图表高度
    });
    const { Global } = G2; // 获取 Global 全局对象
    Global.setTheme('default'); // 传入值为 'default'、'dark' 的一种，如果不是，那么使用 default 主题

    // Step 2: 载入数据源
    chart.source(data);
    // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
    chart.interval().position('genre*sold').color('genre')
    // Step 4: 渲染图表
    chart.render();
    G2.track(false);
}


//month 参数可以换成按天 day 统计或按 week 周 而 nums 是周期参数可以自由设置更多的数值
$.get("{:url('wxapp.rmb/index')}?type=month&nums=1,2,3,4,5,6,7,8,9,10,11,12",function(res){
	if(res.code==0){
		var listdb = new Array();
		$.each(res.data,function(i,rs){
			var name;
			if(i==0){
				name = '本月';
			}else if(i==1){
				name = '上月';
			}else{
				name = i+'月前';
			}
			listdb.push({ month: name, '入帐': rs[0], '出帐': Math.abs(rs[1])  });			
		});
		tabChart(listdb)
		//console.log(listdb);
	}else{
		layer.msg('获取数据失败!');
	}
});
//双曲线
function tabChart(data){
    //var data = [{ month: '本周', '收入': 10, '支出': 20  },{ month: '上周', '收入': 20, '支出': 10 } ];
	  var title_1='入帐',title_2='出帐';
	  const ds = new DataSet();
      const dv = ds.createView().source(data);
      const { Global } = G2; // 获取 Global 全局对象
      Global.setTheme('default'); // 传入值为 'default'、'dark' 的一种，如果不是，那么使用 default 主题
      dv.transform({
        type: 'fold',
        fields: [ title_1, title_2  ], // 展开字段集
        key: 'city', // key字段
        value: 'temperature', // value字段
      });
      const chart = new G2.Chart({
        container: 'mountNode',
        forceFit: true,
        padding: [ 30, 30, 80, 50],
        height: 300
      });
      chart.source(dv, {
        month: {
          range: [ 0, 1 ]
        }
      });
      chart.tooltip({
        crosshairs: {
          type: 'line'
        }
      });
      chart.axis('temperature', {
        label: {
          formatter: val => {
            return val + '';	//单位
          }
        }
      });
      chart.line().position('month*temperature').color('city').shape('smooth');
      chart.point().position('month*temperature').color('city').size(4).shape('circle').style({
        stroke: '#fff',
        lineWidth: 1
      });
      chart.render();
      G2.track(false);
}


</script>

    </div>
</div>